<template>
  <div class="item" v-if="item">
    <div class="logo">
      <img :src="getFile(item.logo)" alt="">
    </div>
    <div class="name">{{ item.name }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useGlobalStore } from '@/store/global';
import { getFile } from '@/api/att';
import { findIdxInArr } from '@/mixin';


const global = useGlobalStore()

const props = defineProps(['id'])

const brands = ref([])
const item = computed(() => {
  const idx = findIdxInArr(brands.value, i => i.id == props.id)
  return idx >= 0 ? brands.value[idx] : null
})

onMounted(async () => {
  brands.value = await global.getBrands()
})

</script>

<style lang="less" scoped>
.item {

  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #aaa;
  width: 80px;
  text-align: center;
  padding: 5px;

  img {
    width: 70px;
    margin-bottom: 8px;
  }
}
</style>